<style lang="less">
@import "./Category.less";
</style>

<template>
  <div class="category1">
    <div class="products-banner-wrap">
      <div class="banner-content-wrap">
        <div class="content-nav">
          <a class="header-icon">
            <div class="bag-wrap">
              <Icon class="bag-icon" type="logo-youtube"></Icon>
            </div>
            <span>实战课程</span>
          </a>
          <div class="header-search">
            <Input
              search
              enter-button
              v-model="key"
              size="large"
              placeholder="搜索感兴趣的商品内容"
            ></Input>
            <ul class="header-search-result"></ul>

            <div class="search-hot">
              <span>热搜：</span>
              <a v-for="(item, i) in hotWords" :key="i" href="#">{{ item }}</a>
            </div>
          </div>
        </div>
      </div>
      <!-- 背景动画 -->
      <div class="darker"></div>
      <div class="products-banner">
        <div class="banner-absolute">
          <div class="banner-bk">
            <div
              class="svg-block image1"
              :style="{
                backgroundImage: 'url(' + require('./block.png') + ')',
              }"
            ></div>
            <div
              class="svg-diamond image2"
              :style="{
                backgroundImage: 'url(' + require('./circle.png') + ')',
              }"
            ></div>
            <div
              class="svg-leaf image3"
              :style="{
                backgroundImage: 'url(' + require('./leaf.png') + ')',
              }"
            ></div>
            <div
              class="svg-small-circle"
              :style="{
                backgroundImage: 'url(' + require('./circle.png') + ')',
              }"
            ></div>
            <div
              class="svg-big-circle"
              :style="{
                backgroundImage: 'url(' + require('./circle.png') + ')',
              }"
            ></div>
            <div
              class="svg-triangle image4"
              :style="{
                background: 'url(' + require('./triangle.png') + ')',
              }"
            ></div>
          </div>
        </div>
      </div>
    </div>
    <div class="products-content-wrap">
      <div class="products-header-nav">
        <div class="nav-wrap">
          <a
            v-for="(item, i) in catData"
            :key="i"
            :class="{ active: i == currFirstCat }"
            @click="handleFirstCat(item, i)"
            >{{ item.title }}</a
          >
        </div>
      </div>
      <div class="products-cat">
        <a
          v-for="(item, i) in secondCat"
          :key="i"
          :class="{ active: i == currSecondCat }"
          @click="handleSecondCat(item, i)"
          >{{ item.title }}</a
        >
      </div>
      <div class="order-box">
        <div class="order-type">
          <a
            v-for="(item, i) in orderData"
            :key="i"
            :class="{ active: i == currOrderType }"
            @click="handleOrderType(item, i)"
            >{{ item.title }}</a
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "CategoryMooc",
  data() {
    return {
      // 模拟数据
      key: "",
      hotWords: [
        "React.js",
        "算法",
        "Vue.js",
        "Python",
        "人工智能",
        "GO语言",
        "小程序",
      ],
      currFirstCat: 0,
      currSecondCat: 0,
      currOrderType: 0,
      orderData: [
        {
          title: "综合排序",
          order: "",
          sort: "",
        },
        {
          title: "最新",
          order: "",
          sort: "",
        },
        {
          title: "销量",
          order: "",
          sort: "",
        },
        {
          title: "评价",
          order: "",
          sort: "",
        },
      ],
      secondCat: [
        {
          title: "不限",
        },
        {
          title: "微服务",
        },
        {
          title: "区块链",
        },
        {
          title: "机器学习",
        },
        {
          title: "深度学习",
        },
        {
          title: "数据分析&挖掘",
        },
        {
          title: "小程序",
        },
        {
          title: "HTML/CSS",
        },
        {
          title: "JavaScript",
        },
        {
          title: "Vue.js",
        },
        {
          title: "React.JS",
        },
        {
          title: "Java",
        },
        {
          title: "SpringBoot",
        },
        {
          title: "SSM",
        },
        {
          title: "Python",
        },
        {
          title: "爬虫",
        },
      ],
      catData: [
        {
          title: "全部",
          type: "all",
        },
        {
          title: "前沿技术",
          children: [
            {
              title: "微服务",
            },
            {
              title: "区块链",
            },
            {
              title: "机器学习",
            },
            {
              title: "深度学习",
            },
            {
              title: "数据分析&挖掘",
            },
          ],
        },
        {
          title: "前端开发",
          children: [
            {
              title: "小程序",
            },
            {
              title: "HTML/CSS",
            },
            {
              title: "JavaScript",
            },
            {
              title: "Vue.js",
            },
            {
              title: "React.JS",
            },
          ],
        },
        {
          title: "后端开发",
          children: [
            {
              title: "Java",
            },
            {
              title: "SpringBoot",
            },
            {
              title: "SSM",
            },
            {
              title: "Python",
            },
            {
              title: "爬虫",
            },
          ],
        },
      ],
    };
  },
  methods: {
    handleFirstCat(v, i) {
      this.currFirstCat = i;
      if (v.type == "all") {
        return;
      }
      let data = [
        {
          title: "不限",
          type: "all",
        },
      ];
      v.children.forEach((e) => {
        data.push(e);
      });
      this.secondCat = data;
    },
    handleSecondCat(v, i) {
      this.currSecondCat = i;
      if (v.type == "all") {
      }
    },
    handleOrderType(v, i) {
      this.currOrderType = i;
    },
  },
  mounted() {},
};
</script>
